<script setup>
/**
 * 设置文档标题并导入必要的库和组件。
 * 使用 `ref` 来管理登录表单的状态和规则，
 * 引入 `axios` 用于发送 HTTP 请求，
 * `Cookies` 用于管理用户登录状态，
 * `ElMessage` 提供消息提示功能，
 * `qs` 用于处理表单数据的序列化。
 */
document.title="桃丽丝研究所 - 模型中心 - 管理员登录"
import {ref} from "vue";
import axios from "axios";
import Cookies from "js-cookie";
import {ElMessage} from "element-plus";
import qs from 'qs'

// 登录表单的引用
const loginFormRef = ref(null);
// 控制登录界面显示的变量
const run = ref(true)
// 登录表单的数据
const loginForm = ref({
  username: '',
  password: ''
});
// 登录表单的校验规则
const loginRules = ref({
  username: [
    {required: true, message: '授权账号不能为空', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '登录密码不能为空', trigger: 'blur'}
  ]
})
/**
 * 提交登录表单的函数。
 * 使用 Element Plus 的表单验证功能验证表单数据，
 * 如果数据有效，则发送登录请求，
 * 根据响应结果提示用户登录是否成功，并进行相应的跳转或操作。
 *
 * @param {Object} formEl 表单元素对象
 */
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      // 发送登录请求
      const res = await axios.post('/api/admin/login', qs.stringify(loginForm.value), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      if (res.data.code === 200) {
        // 登录成功，设置 Cookie 并跳转
        ElMessage.success('登录成功!即将跳转至模型中心....')
        Cookies.set('token', res.data.token)
        Cookies.set('username',loginForm.value.username)
        this.$router.push('/model')
      }else {
        ElMessage.error(res.data.msg)
      }
    }else {
      // 验证失败，提示用户检查输入
      ElMessage.error('请检查输入!')
    }
  })
}

</script>

<template>
  <div v-if="run" class="loginBox">
    <el-card class="logBoxCard">
      <h2 class="title">桃丽丝の模型中心 管理后台</h2>
      <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
          label-position="right"
      >
        <el-form-item label="管理账号" prop="username">
          <el-input
              v-model="loginForm.username"
              name="username"
              type="text"
              auto-complete="on"
              placeholder="请输入管理员账号"
          />
        </el-form-item>
        <el-form-item label="管理密码" prop="password">
          <el-input
              v-model="loginForm.password"
              name="password"
              type="password"
              auto-complete="on"
              placeholder="请输入管理员密码"
          />
        </el-form-item>
        <el-form-item class="buttons">
          <el-button type="primary" @click="onSubmit(loginFormRef)">立即登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <div class="footer">
    <p>桃丽丝研究所 · 版权所有 © 2023-2024 All Rights Reserved.</p>
    <p>开发:雨梦妍Marissa &emsp; 2024.05.24</p>
    <p>
      <a target="_blank" href="https://mtw.so/5zkafw">B站空间</a>&emsp;|&emsp;
      <a target="_blank" href="https://mtw.so/5GQnkd">赞助支持</a>&emsp;|&emsp;
      <a target="_blank" href="https://mtw.so/6wJgWU">联系作者</a>
    </p>
  </div>
</template>


<style scoped>
.loginBox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.logBoxCard {
  width: 400px;
}

.title {
  background-color: rgba(200, 200, 200, 0.5);
  border-radius: 0.5em;
  text-align: center;
  line-height: 80px;
  margin-bottom: 20px;
}

.login-form .el-form-item {
  margin-bottom: 16px;
}

.login-form .el-form-item.buttons {
  display: flex;
  justify-content: space-between;
}

.login-form .el-form-item.buttons .el-button {
  width: 100%;
}

.footer {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  line-height: 30px;
  color: white;
}

a {
  list-style: none;
  text-decoration: none;
  color: white;
}

a:hover {
  color: #ff0000;
}

</style>